﻿<template>
  <div>
      <h2>当前的值为:{{sum}}</h2>
      <h3>当前的值*10为:{{bigSum}}</h3>
      <!-- <h1>下方组件的人有:{{personList}}</h1> -->
      <h1 style="color:red;">Person组件的总人数有:{{personList.length}}</h1>
      <select name="" id="" v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="JIA(n)">+</button>
      <button @click="JIAN(n)">-</button>
  </div>
</template>

<script>
    import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
    export default {
        name:'Count',
        components:{},
        data() {
            return {
                n:1
            }
        },
        methods:{
            ...mapMutations(['JIA','JIAN']),

            ...mapActions(['jadd','delayAdd'])
        },
        computed:{
            ...mapState(['sum','personList']),
            ...mapGetters(['bigSum'])
        },
        mounted(){
            console.log(this)
        }
    }
</script>

<style scoped>

</style>